Suy Luận Kiểu Có Điều Kiện: Làm Chủ Từ Khóa 'infer' trong TypeScript

Hệ thống kiểu của TypeScript cung cấp các công cụ mạnh mẽ để tạo mã mạnh mẽ và dễ bảo trì. Trong số các công cụ này, kiểu có điều kiện nổi bật như một cơ chế linh hoạt để thể hiện các mối quan hệ kiểu phức tạp. Đặc biệt, từ khóa infer mở ra những khả năng nâng cao trong các kiểu có điều kiện, cho phép trích xuất và thao tác kiểu phức tạp. Hướng dẫn toàn diện này sẽ khám phá sự phức tạp của infer, cung cấp các ví dụ thực tế và thông tin chi tiết để giúp bạn làm chủ cách sử dụng nó.

Tìm Hiểu Về Kiểu Có Điều Kiện

Trước khi đi sâu vào infer, điều quan trọng là phải nắm bắt các nguyên tắc cơ bản của kiểu có điều kiện. Kiểu có điều kiện cho phép bạn xác định các kiểu phụ thuộc vào một điều kiện, tương tự như toán tử bậc ba trong JavaScript. Cú pháp tuân theo mẫu này:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Ở đây, nếu kiểu T có thể gán cho kiểu U, thì kiểu kết quả là X; nếu không, nó là Y.

Ví dụ:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Ví dụ đơn giản này minh họa cách các kiểu có điều kiện có thể được sử dụng để xác định xem một kiểu có phải là một chuỗi hay không. Khái niệm này mở rộng đến các tình huống phức tạp hơn, mở đường cho từ khóa infer.

Giới Thiệu Từ Khóa 'infer'

Từ khóa infer được sử dụng trong nhánh true của một kiểu có điều kiện để giới thiệu một biến kiểu có thể được suy ra từ kiểu đang được kiểm tra. Điều này cho phép bạn trích xuất các phần cụ thể của một kiểu và sử dụng chúng trong kiểu kết quả.

Cú pháp:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

Trong cú pháp này, R là một biến kiểu sẽ được suy ra từ cấu trúc của T. Nếu T khớp với mẫu, R sẽ giữ kiểu được suy ra và kiểu kết quả sẽ là X; nếu không, nó sẽ là Y.

Các Ví Dụ Cơ Bản Về Cách Sử Dụng 'infer'

1. Suy Ra Kiểu Trả Về của Hàm

Một trường hợp sử dụng phổ biến là suy ra kiểu trả về của một hàm. Điều này có thể đạt được với kiểu có điều kiện sau:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Giải thích:

• T extends (...args: any) => any: Ràng buộc này đảm bảo rằng T là một hàm.
• (...args: any) => infer R: Mẫu này khớp với một hàm và suy ra kiểu trả về là R.
• R : any: Nếu T không phải là một hàm, kiểu kết quả là any.

Ví dụ:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Ví dụ này minh họa cách ReturnType trích xuất thành công các kiểu trả về của các hàm greet và calculate.

2. Suy Ra Kiểu Phần Tử Mảng

Một trường hợp sử dụng thường xuyên khác là trích xuất kiểu phần tử của một mảng:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Giải thích:

• T extends (infer U)[]: Mẫu này khớp với một mảng và suy ra kiểu phần tử là U.
• U : never: Nếu T không phải là một mảng, kiểu kết quả là never.

Ví dụ:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Điều này cho thấy cách ElementType suy ra chính xác kiểu phần tử của các kiểu mảng khác nhau.

Cách Sử Dụng 'infer' Nâng Cao

1. Suy Ra Tham Số của Hàm

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Giải thích:

• T extends (...args: any) => any: Ràng buộc này đảm bảo rằng T là một hàm.
• (...args: infer P) => any: Mẫu này khớp với một hàm và suy ra các kiểu tham số là một bộ tuple P.
• P : never: Nếu T không phải là một hàm, kiểu kết quả là never.

Ví dụ:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters trích xuất các kiểu tham số dưới dạng một bộ tuple, giữ nguyên thứ tự và kiểu của các đối số của hàm.

2. Trích Xuất Thuộc Tính từ Kiểu Đối Tượng

infer cũng có thể được sử dụng để trích xuất các thuộc tính cụ thể từ một kiểu đối tượng. Điều này đòi hỏi một kiểu có điều kiện phức tạp hơn, nhưng nó cho phép thao tác kiểu mạnh mẽ.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Giải thích:

• K in keyof T: Điều này lặp lại trên tất cả các khóa của kiểu T.
• T[K] extends U ? K : never: Kiểu có điều kiện này kiểm tra xem kiểu của thuộc tính tại khóa K (tức là T[K]) có thể gán cho kiểu U hay không. Nếu có, khóa K được bao gồm trong kiểu kết quả; nếu không, nó bị loại trừ bằng cách sử dụng never.
• Toàn bộ cấu trúc tạo ra một kiểu đối tượng mới chỉ với các thuộc tính có kiểu mở rộng U.

Ví dụ:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType cho phép bạn tạo một kiểu mới chỉ chứa các thuộc tính của một kiểu cụ thể từ một kiểu hiện có.

3. Suy Ra Các Kiểu Lồng Nhau

infer có thể được xâu chuỗi và lồng nhau để trích xuất các kiểu từ các cấu trúc lồng nhau sâu sắc. Ví dụ: hãy xem xét việc trích xuất kiểu của phần tử trong cùng của một mảng lồng nhau.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Giải thích:

• T extends (infer U)[]: Điều này kiểm tra xem T có phải là một mảng hay không và suy ra kiểu phần tử là U.
• DeepArrayElement<U>: Nếu T là một mảng, kiểu này sẽ gọi đệ quy DeepArrayElement với kiểu phần tử U.
• T: Nếu T không phải là một mảng, kiểu này sẽ trả về chính T.

Ví dụ:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Cách tiếp cận đệ quy này cho phép bạn trích xuất kiểu của phần tử ở mức độ lồng sâu nhất trong một mảng.

Ứng Dụng Thực Tế

Từ khóa infer tìm thấy các ứng dụng trong nhiều tình huống khác nhau, nơi yêu cầu thao tác kiểu động. Dưới đây là một số ví dụ thực tế:

1. Tạo Trình Phát Sự Kiện An Toàn Kiểu

Bạn có thể sử dụng infer để tạo trình phát sự kiện an toàn kiểu, đảm bảo trình xử lý sự kiện nhận được đúng loại dữ liệu.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

Trong ví dụ này, EventData sử dụng các kiểu có điều kiện và infer để trích xuất loại dữ liệu được liên kết với một tên sự kiện cụ thể, đảm bảo rằng trình xử lý sự kiện nhận được đúng loại dữ liệu.

2. Triển Khai Bộ Giảm Tốc An Toàn Kiểu

Bạn có thể tận dụng infer để tạo một hàm giảm tốc an toàn kiểu để quản lý trạng thái.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Mặc dù ví dụ này không trực tiếp sử dụng `infer`, nhưng nó đặt nền tảng cho các kịch bản giảm tốc phức tạp hơn. `infer` có thể được áp dụng để trích xuất động loại `payload` từ các loại `Action` khác nhau, cho phép kiểm tra kiểu nghiêm ngặt hơn trong hàm giảm tốc. Điều này đặc biệt hữu ích trong các ứng dụng lớn hơn với nhiều hành động và cấu trúc trạng thái phức tạp.

3. Tạo Kiểu Động từ Phản Hồi API

Khi làm việc với API, bạn có thể sử dụng infer để tự động tạo các kiểu TypeScript từ cấu trúc của các phản hồi API. Điều này giúp đảm bảo an toàn kiểu khi tương tác với các nguồn dữ liệu bên ngoài.

Hãy xem xét một kịch bản đơn giản hóa, trong đó bạn muốn trích xuất loại dữ liệu từ phản hồi API chung:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType sử dụng infer để trích xuất kiểu U từ ApiResponse<U>, cung cấp một cách an toàn kiểu để truy cập cấu trúc dữ liệu được trả về bởi API.

Các Phương Pháp Hay Nhất và Cân Nhắc

• Rõ Ràng và Dễ Đọc: Sử dụng tên biến kiểu mô tả (ví dụ: ReturnType thay vì chỉ R) để cải thiện khả năng đọc mã.
• Hiệu Suất: Mặc dù infer rất mạnh mẽ, nhưng việc sử dụng quá nhiều có thể ảnh hưởng đến hiệu suất kiểm tra kiểu. Sử dụng nó một cách thận trọng, đặc biệt là trong các cơ sở mã lớn.
• Xử Lý Lỗi: Luôn cung cấp một kiểu dự phòng (ví dụ: any hoặc never) trong nhánh false của một kiểu có điều kiện để xử lý các trường hợp mà kiểu không khớp với mẫu dự kiến.
• Độ Phức Tạp: Tránh các kiểu có điều kiện quá phức tạp với các câu lệnh infer lồng nhau, vì chúng có thể trở nên khó hiểu và bảo trì. Tái cấu trúc mã của bạn thành các kiểu nhỏ hơn, dễ quản lý hơn khi cần thiết.
• Kiểm Tra: Kiểm tra kỹ lưỡng các kiểu có điều kiện của bạn với nhiều loại đầu vào khác nhau để đảm bảo chúng hoạt động như mong đợi.

Các Cân Nhắc Toàn Cầu

Khi sử dụng TypeScript và infer trong ngữ cảnh toàn cầu, hãy xem xét những điều sau:

• Nội địa hóa và Quốc tế hóa (i18n): Các kiểu có thể cần phải thích ứng với các ngôn ngữ và định dạng dữ liệu khác nhau. Sử dụng các kiểu có điều kiện và `infer` để xử lý động các cấu trúc dữ liệu khác nhau dựa trên các yêu cầu cụ thể của từng ngôn ngữ. Ví dụ: ngày tháng và tiền tệ có thể được biểu diễn khác nhau ở các quốc gia khác nhau.
• Thiết Kế API cho Khán Giả Toàn Cầu: Thiết kế API của bạn với khả năng truy cập toàn cầu. Sử dụng các cấu trúc và định dạng dữ liệu nhất quán, dễ hiểu và xử lý bất kể vị trí của người dùng. Các định nghĩa kiểu nên phản ánh tính nhất quán này.
• Múi Giờ: Khi xử lý ngày và giờ, hãy lưu ý đến sự khác biệt về múi giờ. Sử dụng các thư viện thích hợp (ví dụ: Luxon, date-fns) để xử lý chuyển đổi múi giờ và đảm bảo biểu diễn dữ liệu chính xác trên các khu vực khác nhau. Hãy cân nhắc biểu diễn ngày và giờ ở định dạng UTC trong các phản hồi API của bạn.
• Sự Khác Biệt Văn Hóa: Nhận thức được sự khác biệt văn hóa trong biểu diễn và giải thích dữ liệu. Ví dụ: tên, địa chỉ và số điện thoại có thể có các định dạng khác nhau ở các quốc gia khác nhau. Đảm bảo rằng các định nghĩa kiểu của bạn có thể đáp ứng các biến thể này.
• Xử Lý Tiền Tệ: Khi xử lý các giá trị tiền tệ, hãy sử dụng biểu diễn tiền tệ nhất quán (ví dụ: mã tiền tệ ISO 4217) và xử lý chuyển đổi tiền tệ một cách thích hợp. Sử dụng các thư viện được thiết kế để thao tác tiền tệ để tránh các vấn đề về độ chính xác và đảm bảo tính toán chính xác.

Ví dụ: hãy xem xét một kịch bản trong đó bạn đang tìm nạp hồ sơ người dùng từ các khu vực khác nhau và định dạng địa chỉ khác nhau dựa trên quốc gia. Bạn có thể sử dụng các kiểu có điều kiện và `infer` để điều chỉnh động định nghĩa kiểu dựa trên vị trí của người dùng:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format

            

              
                Copy
              
            
          

Bằng cách bao gồm `countryCode` trong kiểu `UserProfile` và sử dụng các kiểu có điều kiện dựa trên mã này, bạn có thể điều chỉnh động kiểu `address` để khớp với định dạng dự kiến cho từng khu vực. Điều này cho phép xử lý an toàn kiểu các định dạng dữ liệu đa dạng trên các quốc gia khác nhau.

Kết Luận

Từ khóa infer là một bổ sung mạnh mẽ cho hệ thống kiểu của TypeScript, cho phép thao tác và trích xuất kiểu phức tạp trong các kiểu có điều kiện. Bằng cách làm chủ infer, bạn có thể tạo mã mạnh mẽ, an toàn về kiểu và dễ bảo trì hơn. Từ việc suy ra các kiểu trả về của hàm đến trích xuất các thuộc tính từ các đối tượng phức tạp, khả năng là rất lớn. Hãy nhớ sử dụng infer một cách thận trọng, ưu tiên sự rõ ràng và khả năng đọc để đảm bảo mã của bạn vẫn dễ hiểu và dễ bảo trì về lâu dài.

Hướng dẫn này đã cung cấp một cái nhìn tổng quan toàn diện về infer và các ứng dụng của nó. Thử nghiệm với các ví dụ được cung cấp, khám phá các trường hợp sử dụng bổ sung và tận dụng infer để nâng cao quy trình phát triển TypeScript của bạn.